<template>
  <el-dialog
    :title="state.title"
    v-model="state.visible"
    @close="handleClose">
    <el-form :model="state.info" ref="refForm" label-width="140px" class="good-form">
      <el-form-item label="标题" prop="title">
        <el-input v-model="state.info.title"></el-input>
      </el-form-item>
      <el-form-item label="内容" prop="content">
        <el-input type="textarea" :rows="15" v-model="state.info.content"></el-input>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="state.visible = false">取 消</el-button>
        <el-button type="primary" @click="submit">确 定</el-button>
      </span>
    </template>

  </el-dialog>
</template>

<script setup>
import { reactive, ref } from 'vue'
import crud from '../utils/crud'
import { AdminMessageInfo, AdminMessagePost } from '../api/server/message'

const props = defineProps({
  reload: Function
})
const refForm = ref(null)
const state = reactive({
  visible: false,
  title: '添加',
  id: 0,
  info: {
    title: '',
    content: ''
  },
})
const open = async (id) => {
  state.title = id ? '编辑' : '添加'
  state.visible = true
  if (id) {
    const { data } = await AdminMessageInfo(id)
    state.info = data
  } else {
    state.info = reactive({ title: '', content: '' })
  }
}
// 关闭弹窗
const handleClose = () => refForm.value.resetFields()
const submit = async () => {
  await crud.update(AdminMessagePost, state.info, async () => {
    state.visible = false
    await props.reload()
  })
}
defineExpose({ open })
</script>

<style scoped>

</style>
